<template>
  <div>
    <el-card class="md-10">
      <!-- 导入之前注册的全局三级分类组件 -->
      <CategorySelector :disabled="SpuStatus != STATUS.SPULIST"></CategorySelector>
    </el-card>

    <el-card>
      <!-- 主列表 -->
      <SpuList v-if="SpuStatus == STATUS.SPULIST" v-model="SpuStatus" @TransMitSpuInfo="TransMitSpuInfo"></SpuList>
      <!-- 新增 spu -->
      <SpuForm
        v-if="SpuStatus == STATUS.SPUFORM"
        v-model="SpuStatus"
        :spuInfo="spuInfo"
        @TransMitSpuInfo="TransMitSpuInfo"
      ></SpuForm>
      <!-- 新增sku -->
      <SkuForm
        v-if="SpuStatus == STATUS.SKUFORM"
        v-model="SpuStatus"
        :spuInfo="spuInfo"
        @TransMitSpuInfo="TransMitSpuInfo"
      ></SkuForm>

      <!-- 主列表 -->
      <!-- <SpuList v-if="SpuStatus == STATUS.SPULIST" @update:modelValue="updatemodelValue"></SpuList> -->
      <!-- 新增 spu -->
      <!-- <SpuForm v-if="SpuStatus == STATUS.SPUFORM" @update:modelValue="updatemodelValue"></SpuForm> -->
      <!-- 新增sku -->
      <!-- <SkuForm v-if="SpuStatus == STATUS.SKUFORM" @update:modelValue="updatemodelValue"></SkuForm> -->
    </el-card>
  </div>
</template>

<script lang="ts">
// 枚举一个状态 用来控制页面的切换
export enum STATUS {
  SPULIST = 1,
  SPUFORM = 2,
  SKUFORM = 3
}
</script>

<script setup lang="ts">
// 导入组件
import SpuList from './components/spuList/index.vue' // 主列表
import SpuForm from './components/spuForm/index.vue' // 新增spu
import SkuForm from './components/skuForm/index.vue' // 新增sku

import type { SpuInfoListModel } from '@/api/spu'
// 导入ref
import { ref } from 'vue'

// 默认展示 主列表内容
const SpuStatus = ref(STATUS.SPULIST)

// 初始化表单数据
const initSpuInfo = (): SpuInfoListModel => ({
  spuName: '',
  description: '',
  category3Id: undefined, // 三级分类的id两个位置赋值,要么初始化赋值,保存前组装数据赋值
  tmId: undefined,
  spuSaleAttrList: [],
  spuImageList: []
})

const spuInfo = ref<SpuInfoListModel>(initSpuInfo())

// 声明一个自定义事件
// 并接收到子组件传递过来的参数
const TransMitSpuInfo = (spu: SpuInfoListModel | undefined) => {
  spuInfo.value = spu ? spu : initSpuInfo() // 接收到主列表传过来的spu,在传给SpuForm即可
}
</script>

<style scoped></style>
